<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>牛马（Cattle A Horses）</title>
    <link rel="icon" href="../image/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="../plugs/layui/src/css/layui.css">
    <link rel="stylesheet" href="../css/zlxindex.css">

    <link rel="stylesheet" href="../css/style.css">
    <style>
        .layui-col-md3 {
            top: 10px;
        }

        .layui-panel {
            width: 220px;
            height: 128px;
            top: 15px;
        }

        .card-body {
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .card-header {
            height: 24px;
        }

        .card-bottom {
            height: 18px;
        }

        .top1>div {
            box-shadow: 0px 0px 10px #c3c3c3;
            border-radius: 10px;
            border: none;
            padding: 20px;

        }

        .mobile>li {
            padding: 10px;
            box-shadow: 0px 0px 10px #c3c3c3;
            border-radius: 10px;
            border: none;
        }



        .two {
            padding: 10px;
        }

        .two>div {
            box-shadow: 0px 0px 10px #c3c3c3;
            border-radius: 10px;
            border: none;
            padding: 20px;
        }
    </style>
    <script src="../js/head-nav.js"></script>
</head>

<body>
    <div class="main" style="padding-top: 10px;" id="senddiv">
        <div class="layui-row layui-col-space12">
            <div class="layui-col-md2">

            </div>





            <div class="layui-col-md6">

                <div class=" top1 layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-card-header card-header"><a href="#">共码未来</a></div>
                        <div class="layui-card-body card-body">
                            <a href="#">
                                2022 Google 谷歌开发者大会，邀你线下相聚！<br>
                                一起探索更高效的开发工具与实践ssssssssss<br>ssssss
                            </a>
                        </div>
                        <div class="card-bottom">卡片底部<span style="float:right;"><a href="#">进入讨论》</a></span></div>
                    </div>




                    <div class="layui-col-md6">
                        <div class="layui-card-header card-header"><a href="#">字节跳动</a></div>
                        <div class="layui-card-body card-body">
                            <a>
                                卡片式面板面板通常用于非白色背景色的主体内<br>
                                从而映衬出边框投影
                            </a>
                        </div>
                        <div class="card-bottom">卡片底部<span style="float:right;"><a href="#">进入讨论》</a></span></div>
                    </div>

                </div>




                <div class="layui-panel layui-col-md12 ">
                    <img src="../image/index.jpg" style="width: 100%;height:100%;">
                </div>


                <div class="  layui-panel layui-col-md12 two">
                    <div class="layui-col-md12 ">
                        <SPAN>名企面试题<a href="#" style="float: right;">更多></a></SPAN>

                        <div class="bodyCon08" style="height: 250px;">
                            <!--学员-->
                            <div class="students">

                                <div id="four_flash">
                                    <div class="flashBg">
                                        <ul class="mobile">
                                            <li>
                                                <img src="../image/senke_xy00.jpg" />
                                                <dd>高同学</dd>
                                                <p>2热门指数</p>
                                                <a href="" class="layui-btn layui-btn-primary bnt">跳转的按钮</a></a>
                                            </li>
                                            <li>
                                                <img src="../image/senke_xy01.jpg" />
                                                <dd>李同学</dd>
                                                <p>热门指数 </p>
                                                <a href="" class="layui-btn layui-btn-primary bnt">跳转的按钮</a></a>
                                            </li>
                                            <li>
                                                <img src="../image/senke_xy02.jpg" />
                                                <dd>丁同学</dd>
                                                <p>热门指数 </p>
                                                <a href="" class="layui-btn layui-btn-primary bnt">跳转的按钮</a></a>
                                            </li>
                                            <li>
                                                <img src="../image/senke_xy03.jpg" />
                                                <dd>宋同学</dd>
                                                <p>热门指数 ；</p>
                                                <a href="" class="layui-btn layui-btn-primary bnt">跳转的按钮</a></a>
                                            </li>
                                            <li>
                                                <img src="../image/senke_xy04.jpg" />
                                                <dd>战同学</dd>
                                                <p>热门指数 </p>
                                                <a href="" class="layui-btn layui-btn-primary bnt">跳转的按钮</a></a>
                                            </li>
                                            <li>
                                                <img src="../image/senke_xy05.jpg" />
                                                <dd>于同学</dd>
                                                <p>热门指数 </p>
                                                <a href="" class="layui-btn layui-btn-primary bnt">跳转的按钮</a></a>
                                            </li>

                                        </ul>
                                    </div>
                                    <div class="but_left" style="width:25px;height:50px;"><img
                                            src="../image/qianxleft.png" style="width:25px;height:50px;" /></div>
                                    <div class="but_right" style="width:25px;height:50px;"><img
                                            src="../image/qianxr.png" style="width:25px;height:50px;" /></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend></legend>
                            </fieldset>

                            <ul class="flow-default" id="LAY_demo1">

                            </ul>
                        </div>


                    </div>


                </div>
            </div>
            <div class="layui-col-md3" style="left: 10px; ">
                <input style="width: 220px;height:30px;">
                <div class="layui-carousel" id="test1" lay-filter="test1" style="top:5px">
                    <div carousel-item="">
                        <div>条目1</div>
                        <div>条目2</div>
                        <div>条目3</div>
                        <div>条目4</div>
                        <div>条目5</div>
                    </div>
                </div>

                <div class="layui-panel">
                    <img src="../image/index2.png" style="width: 220px;height:128px;">
                </div>



                <div class="layui-card"
                    style="width: 220px;height:128px;box-shadow: 0px 0px 10px #c3c3c3;border-radius: 10px; margin-top: 30px;">
                    <div class="layui-card-header"><span class="layui-icon" style="color:#5FB878 ;"><a
                                href="#">&#xe642;发起讨论</a></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="layui-icon"
                            style="color:#5FB878 ;"><a href="#">&#xe609;随机面试</a></span></div>
                    <div class="layui-card-body">
                        <span><a href="#">继续阅读</a></span><br>
                        <br>
                        <span><a href="#">继续练习</a></span>
                    </div>
                </div>



                <div class="layui-card"
                    style="width: 220px;height:auto;box-shadow: 0px 0px 10px #c3c3c3; border-radius: 10px; margin-top: 30px;">
                    <div class="layui-card-header"><span>热门讨论</span></div>
                    <div class="layui-card-body">
                        <ul v-for="d,index in hdiscuss">
                            <li><span style="color:#FFB800 ;">{{index+1}}</span>&nbsp;&nbsp;<span><a :href="'discuss.html?id='+d.id"><img
                                            :src="'http://localhost:70/cattle-and-horses-oj-html/image/' +d.avatar"
                                            class="layui-nav-img">&nbsp;&nbsp;{{d.title}}<br><span>{{d.description}}</span></a></span>
                            </li>
                        </UL>
                    </div>
                </div>



                <div class="layui-panel">
                    <img src="../image/index3.png" style="width: 220px;height:128px;">
                </div>
                <div class="layui-panel">
                    <img src="../image/index4.png" style="width: 220px;height:128px;">
                </div>
                <div class="layui-card"
                    style="width: 220px;height:auto;box-shadow: 0px 0px 10px #c3c3c3; border-radius: 10px; margin-top: 30px;">
                    <div class="layui-card-header"><span>热门题解</span></div>
                    <div class="layui-card-body">
                        <ul v-for="a,index in hanswer">
                            <li><span style="color:#FFB800 ;">{{index+1}}</span>&nbsp;&nbsp;<span><a><img
                                            :src="'http://localhost:70/cattle-and-horses-oj-html/image/' +a.avatar"
                                            class="layui-nav-img">&nbsp;&nbsp;{{a.title}}<br><span>{{a.description}}</span></a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-col-md1"></div>
        </div>

    </div>
    <script src="../js/jquery.params.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../plugs/layui/src/layui.js"></script>
    <script>

        //TODO 流加载
        layui.use('flow', function () {
            var flow = layui.flow;
            flow.load({
                elem: '#LAY_demo1' //流加载容器
                , scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
                , done: function (page, next) { //执行下一页的回调
                    //模拟数据插入,page表示当前页，
                    setTimeout(function () {
                        let pageSize = 4;

                        //TODO 向后端请求数据...
                        $.get("http://localhost:70/devu/discuss/next", { pageSize: pageSize, pageNum: page }, function (res) {
                            let pages = res.content;
                            let pageTotal = pages.totalPages;
                            let datas = pages.content;
                            let totalElements = pages.totalElements;

                            let fors = pageSize;

                            if (pageSize * page > totalElements) {
                                fors = totalElements - (pageSize * (page - 1));
                            }
                            console.log("================")
                            console.log(pages);
                            var lis = [];
                            for (var i = 0; i < fors; i++) {
                                let nickname = datas[i].author;
                                let avatar = "http://localhost:70/cattle-and-horses-oj-html/image/" + datas[i].avatar;
                                let discuss = datas[i].content;
                                let id=datas[i].id;
                                lis.push(`<li><div class="layui-col-md12" style="padding:10px;  box-shadow: 0px 0px 10px #c3c3c3; margin-top:10px;"><div class="layui-card-header card-header"><img src="${avatar}" class="layui-nav-img"/><a href="">${nickname}</a></div><div class="layui-card-body card-body"><a href="">${discuss}</a></div><div class="card-bottom" style="border-bottom-width: 20px;margin-bottom: 10px;"><a href="javascript:todiscuss(${id})" class="layui-btn layui-icon  layui-btn-radius  layui-btn-sm">&#xe611;讨论</a></div></div></li>`)
                            }
                            next(lis.join(''), page < pageTotal);
                        })
                        //TODO 请求完毕....

                    }, 500);
                }
            });

        });
        //TODO  流加载分割线  .....




        //TODO 热门排行榜
        var vm = new Vue({
            el: "#senddiv",
            data: function () {
                return {
                    hdiscuss: "",
                    hanswer: ""
                };
            },
            mounted() {
                this.discuss();
                this.answer();
            },
            methods: {
                discuss: function () {
                    $.ajax({
                        type: 'get',
                        url: 'http://localhost:70/devu/discuss/hot',
                        data: { pageSize: 4, pageNum: 1 },
                        success: function (res) {
                            console.log(res.content.content);
                            vm.hdiscuss = res.content.content;
                        }
                    });
                },
                answer :function(){
                    $.ajax({
                        type: 'get',
                        url: 'http://localhost:70/devu/answer/hot',
                        data: { pageSize: 4, pageNum: 1 },
                        success: function (res) {
                            console.log(res.content.content);
                            vm.hanswer = res.content.content;
                        }
                    });
                }
            }
        })

        // TODO 热门排行榜.......



        //TODO 去讨论....
        todiscuss=function(id)
        {
            window.location="discuss.html?id="+id;
        }

        //TODO 讨论结束












        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;
        });
        layui.use('element', function () {
            var element = layui.element;

            //…
        });
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                , width: '220px' //设置容器宽度
                , height: '128px'
                , arrow: 'none' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });

        var _index5 = 0;
        $("#four_flash .but_right img").click(function () {
            _index5++;
            var len = $(".flashBg ul.mobile li").length;
            if (_index5 + 5 > len) {
                $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html());
            }
            $("#four_flash .flashBg ul.mobile").stop().animate({ left: -_index5 * 326 }, 1000);
        });


        $("#four_flash .but_left img").click(function () {
            if (_index5 == 0) {
                $("ul.mobile").prepend($("ul.mobile").html());
                $("ul.mobile").css("left", "-1380px");
                _index5 = 6
            }
            _index5--;
            $("#four_flash .flashBg ul.mobile").stop().animate({ left: -_index5 * 326 }, 1000);
        })
    </script>
</body>

</html>